Flash 5 - part 1: Intro &emp; Overview
Introduction
In these few articles I will describe how to use Macromedia's Flash 5. They will cover most aspects of it from drawing graphics upto using the built-in Action-scripting. These articles were written for Flash 5, but should be relevant to Flash 6 (or 'Flash MX' as they like to call it) without too much trouble.
This article will briefly cover all the main aspects of Flash, how they work together and should give you a good overview of how it.
Information overload
Don't worry if you don't understand everything in this article, merely use it as reference later on, if you need to.
The main parts to understand are Movie-clips (containers), the Library and Instances, everything else should be pretty straight forward.
Why I wrote this
Okay, perhaps you are wondering why should you bother to learn Flash 5, "after all, it's just a fancy animation package, right?".
Wrong!
In fact you can use Flash 5 for many things, not just creating another lame 'click here to buy this' banner animation for a website. You can use it for many, many other things. In fact I've been using Flash 4 and 5 for almost 2 years now in my job to create a large spectrum of different productions and I'm still shocked by how little I need to load up some other packages. Anyway, enough of this Macromedia ass-kissing, Flash 5 still has many, many faults which often result in my entire wages ending up in the swear-box ;)
Things to do with Flash
1 - A simple drag-n-drop game for kids
2 - A large number of CD-based programmes (including music, voice-overs, menus, graphs etc..)
3 - Graphics for a large number of websites (all vector-based, created purely in Flash)
4 - Animated banners (curse, curse)
5 - A number of user manuals (completely designed, edited and printed from Flash!)
6 - Company Logos, idents for 300dpi printing
Whoa! Where the hell do I start?
Okay, you've loaded up Flash 5 and shocked by the vast number of 'Panels' will fill the screen. Don't worry, close most of them down and leave just the 'Movie' window and 'Tool' panel. You should be familiar with the standard tools panel. The only real difference is that certain tools (like the Fill function) make 'Modifiers' buttons appear on the bottom of the tools panel.
The basic ideas behind Flash
Everything in Flash is based on containers called 'Movie-clips' or 'Movies'. These are just entities which have their own Timelines and Layers. Inside these 'Movie-clips' can be Bitmaps, Sounds, Vector graphics shapes and (most important of all) other Movie-clips!
Yes, just like those wooden Russian Dolls and like onion skins, a movie-clip can be inside a movie-clip which is inside another movie-clip, which is inside... well, you get the idea.
Actions can be attached to either Button Instances (to handle input events) or be placed on a Time-line to perform tasks at specific points in time (for example, when one animation reaches the end the last frame it can contain some action-scripting which triggers some other event off).
BEHAVIOURS:
Everything in Flash is based on the movie-clip container idea. Even though they can have a 'behaviour' (like Buttons, Graphics and Movie-Clips) they are still movie-clips in disguise, they all have a time-line and allow multiple layers.
LAYERS:
These are like a stack of glass panes or animation-cells. Items can be placed on top of each other to produce overlays in the normal Photoshop-like way.
My best advice: Place everything on different layers! For things like shape morping and motion tweening you MUST place items on different layers.
TIME-LINES:
This is like a length of cinema film. Each frame on the film represents a small, moment of time (usually ~10th of a second). Flash will play a movie-clip along the time-line forever, unless you stop it with some action-scripting.
FRAMES and KEYFRAMES:
The time-line is broken up into Frames and KeyFrames. The best way to remember them is to think of a KeyFrame as being the start of something new (a change) like turning the key in your car. Where as normal frames are used to repeat the last KeyFrame's contents for a number of time ticks (ie. the engine in your car is still ticking over).
For certain tasks (like morphing and tweening) you can only edit them on KeyFrames.
SHAPES:
These are the Strokes (line edges) and Fill (inside areas) of the vector polygons. You can cut and join shapes (ie. polygons) together simply by Selecting + Dragging them over each other. Most of the time you will draw a basic shape, convert it into a symbol and then edit it later, this means you can add Layers much more easily.
LIBRARY:
The library is a collection of all the Symbols (Buttons, Movie-clips, Graphics, Bitmaps and Sounds) which you have used in your Movie. The main purpose of the library is to allow items to be reused again and again simply by dragging an 'instance' of them onto your work area.
SYMBOLS:
You can of course draw a vector shape directly onto the movie-clip window. But this can be time consuming if you wish to repeat a shape somewhere else (you don't really want to re-draw it again, do you?). Its much better to draw a shape, select it and convert it into a Symbol. The actual shape will be placed in the Library with all the other Bitmaps, Sounds, Buttons, Movie-clips and Graphics.
When an item has been converted into a symbol it can be used again and again simply by dragging it from the library onto the work area, where it becomes an Instance of the shape.
You should notice that clicking on the shape in the work area will show a blue-box around the shape. This means its an Instance of a symbol. You can edit a symbol by double-clicking on it, right-clicking --> Edit or by using the right Edit menu on a library item.
If you change the shape in the library, then ALL instances of that shape will also change. If you don't want this to happen then use the 'Duplicate symbol' option in the library.
INSTANCES:
These are kinda like 'copies' of a symbol. You drag an item from the library onto the work area. Each 'copy' of a symbol is an Instance and can be transformed in many ways, scaled, skewed, recoloured, flipped, alpha-faded and morphed/tweened (using keyframes + tweens).
Each instance can have it's own Instance name (this is not the same as the library name). This means you can reuse the same symbol many times in the same frame and control each one individually by using their Instance Names.
You'll probably use Movie-Clips the most followed by Buttons.
WORK-AREA: or SCENE: or STAGE:
This is where you place, draw, edit and erase whats inside the current movie-clip (container). It's best to think of the work area as being like your current directory/folder. As you edit items inside other items you will see the 'path' above the time-line. This makes life much easier when you're editing a component inside another component, inside another... etc..
TARGETS:
Because movie-clips can be placed inside other movie-clips you will often need to refer to a parent instance (or a child instance) when using action-scripting, this is done using Targets, which is basically no more complex than a directory/folder path. You can have absolute (ie. a target path from the root movie) or relative targets.
ACTION-SCRIPTING:
This is the built-in Object-Orientated programming language of Flash. If you know Javascript then you can easily program using the action-scripting, it's 95% identical.
Closing words
Well, that was a pretty boring article, but needed to be written. The next part will focus on the entire Flash User-Interface, what each panel does, how it works with others and what those timeline and stage (work-area) windows are.
Next time we'll look at the Flash User Interface and see what all those pesky panels do.
Happy Flashin'